<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>demo</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <input type="text" v-model="message" placeholder="请输入关键字">
    <ul>
      <li v-for="item in persons1">
        {{item.name}}--{{item.age}}
      </li>
    </ul>
  </div>
</body>

<script type="text/javascript">
  // 创建Vue实例
  let vm = new Vue({
    el: '#demo',
    data() {
      return {
        message: '',
        persons: [
          { name: '张三', age: 18 },
          { name: '李四', age: 18 },
          { name: '王五', age: 18 },
          { name: '赵六', age: 18 },
        ],
        persons1: []
      }
    },

    watch: {
      message: {
        // 开启立即检测
        immediate: true,
        handler(value) {
          const result = this.persons.filter((p) => {
            return p.name.includes(value)
          })
          this.persons1 = result
        }
      }
    }
  })
</script>

</html>